<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程分类</el-breadcrumb-item>
        <el-breadcrumb-item>管理商品</el-breadcrumb-item>
      </el-breadcrumb>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">管理商品</h3>
    </el-card>
<!--    数据主体-->
    <el-card style="margin-top: 20px">
      <el-table
          :data="courseList"
          style="width: 100%"
          @selection-change="selectionChange">
        <el-table-column
            type="selection"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="coursename"
            label="课程名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="coursecover"
            label="课程封面"
            width="180">
          <template slot-scope="scope">
            <img :src="nginxUrl+scope.row.coursecover" style="width: 50px;height: 50px;border-radius: 50%" />
          </template>
        </el-table-column>
        <el-table-column
            prop="courseprice"
            label="课程价格"
            width="100">
        </el-table-column>
        <el-table-column
            prop="coursesubscription"
            label="课程订阅量"
            width="100">
        </el-table-column>
        <el-table-column
            prop="coursestatus"
            label="课程状态"
            width="90">
          <template slot-scope="scope">
            <span v-text="scope.row.coursestatus ==1 ?'上架':'下架'"></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="inserttime"
            label="上架时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="type.typename"
            label="分类"
            width="100">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="edit(scope.row)">编辑</el-button>
<!--            <el-button-->
<!--                size="mini"-->
<!--                type="primary"-->
<!--                @click="">移出分类</el-button>-->
            <el-button
                size="mini"
                type="warning"
                @click="changeType(scope.row)">修改分类</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10 , 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <!--修改对话框-->
    <div>
      <el-dialog title="修改课程信息" ref="editCourseForm" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form :model="editCourseForm" size="small" ref="editCourseRefForm" :rules="editCourseFormRules">
          <el-form-item label="课程名称" :label-width="formLabelWidth" prop="coursename">
            <el-input v-model="editCourseForm.coursename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="课程封面" :label-width="formLabelWidth" prop="coursecover">
            <el-input type="hidden" v-model="editCourseForm.coursecover" autocomplete="off"></el-input>
            <el-upload
                class="avatar-uploader"
                :action="uploadUr2"
                :show-file-list="false"
                name="coursecover"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload2">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="课程价格" :label-width="formLabelWidth" prop="courseprice">
            <el-input v-model="editCourseForm.courseprice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="课程订阅量" :label-width="formLabelWidth" prop="coursesubscription">
            <el-input v-model="editCourseForm.coursesubscription" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="课程状态" :label-width="formLabelWidth" prop="coursestatus">
            <el-radio v-model="editCourseForm.coursestatus" :label="1">上架中</el-radio>
            <el-radio v-model="editCourseForm.coursestatus" :label="2">下架中</el-radio>
            <el-radio v-model="editCourseForm.coursestatus" :label="3">待上架</el-radio>
          </el-form-item>
          <el-form-item label="上架时间" :label-width="formLabelWidth" prop="inserttime">
            <el-date-picker
                v-model="editCourseForm.inserttime"
                type="date"
                placeholder="选择日期"
                aria-readonly="true"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
<!--          <el-form-item label="课程分类" :label-width="formLabelWidth" >-->
<!--            <el-select v-model="editCourseForm.type.id" placeholder="请选择课程类型">-->
<!--              <el-option label="请选择部门类型" value="0"></el-option>-->
<!--              <el-option v-for="c in courseTypeList" :label="c.typename" :value="c.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click.prevent="cancelCourseEdit">取 消</el-button>
          <el-button type="primary" @click.prevent="saveEditCorse">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="修改课程分类" ref="editCourseForm" :visible.sync="dialogFormVisible2" :close-on-click-modal="false">
        <el-form :model="editCourseForm" size="small" ref="editCourseRefForm" :rules="editCourseFormRules">
          <el-form-item label="课程分类" :label-width="formLabelWidth" >
            <el-select v-model="editCourseForm.type.id" placeholder="请选择课程类型">
              <el-option label="请选择部门类型" value="0"></el-option>
              <el-option v-for="c in courseTypeList" :label="c.typename" :value="c.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click.prevent="cancelCourseEdit2">取 消</el-button>
          <el-button type="primary" @click.prevent="saveEditCorse2">确 定</el-button>
        </div>
      </el-dialog>
    </div>


    <div></div>
  </div>
</template>

<script>
export default {
  name: "CorseManage",
  data(){
    return{
      uploadUr2:this.$MyUrl.serverUrl + "course/upload",
      imageUrl2:'',//修改用
      nginxUrl:this.$MyUrl.imgUrl+"course/",
      tid:this.$route.query.id,
      name:"",
      now:"",
      size:"",
      pageNum: 1,
      pageSize: 5,
      total: 9,
      courseList: [],
      courseTypeList:[],
      dialogFormVisible:false,
      dialogFormVisible2:false,
      formLabelWidth:'120px',
      editCourseForm: {
        id:"",
        coursename: "",
        coursecover: "",
        courseprice: "",
        coursesubscription: "",
        coursestatus: "",
        inserttime: "",
        type:{
          id: '',
          typename:'',
        },
      },
      //修改验证
      editCourseFormRules:{

      },
    };
  },
  methods: {
    changeType(row){
      this.dialogFormVisible2=true;
      this.editCourseForm = row;

    },
    handleAvatarSuccess2(res, file) {
      if (res.code==200){
        this.editCourseForm.coursecover=res.data;


      }
      this.imageUrl2 = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //保存修改
    saveEditCorse(){
      let url = "course/modify";
      this.$axios.put(url,this.editCourseForm)
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:"success",
                message:res.data.msg,
                duration:1000
              });
              this.dialogFormVisible = false ;
              //刷新页面
              this.$router.push("/Sort")
            }else {
              this.$message({
                type:"error",
                message:res.data.msg,
                duration:1000
              });
            }
          })
      // this.$refs.editEmpForm.validate((valid) => {
      //       if (valid) {
      //     //验证通过
      //
      //   }else {
      //     return ;
      //   }
      // })
    },
    //保存修改
    saveEditCorse2(){
      let url = "course/modify";
      this.$axios.put(url,this.editCourseForm)
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:"success",
                message:"修改分类成功！",
                duration:1000
              });
              this.dialogFormVisible2 = false ;
              //刷新页面
              this.$router.push("/Sort")
            }else {
              this.$message({
                type:"error",
                message:"修改分类失败！",
                duration:1000
              });
            }
          })
      // this.$refs.editEmpForm.validate((valid) => {
      //       if (valid) {
      //     //验证通过
      //
      //   }else {
      //     return ;
      //   }
      // })
    },
    //取消修改
    cancelCourseEdit(){
      this.dialogFormVisible = false ;
      //清空修改表单里面的内容
      this.$refs.editCourseRefForm.resetFields();
    },
    //取消修改
    cancelCourseEdit2(){
      this.dialogFormVisible2 = false ;
      //清空修改表单里面的内容
      this.$refs.editCourseRefForm.resetFields();
    },
    //row 代表课程的所有内容  打开修改页面
    edit(row){
      this.dialogFormVisible = true ;

      this.editCourseForm = row;
      this.imageUrl2=this.nginxUrl+this.editCourseForm.coursecover;
    },
    //更改每页多少条数据
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCourseList();
    },
    //换页
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCourseList();
    },
    //获取选中的ids
    selectionChange(val) {
      this.courseIds = [];
      //清空ids中的id
      for (let e of val) {
        this.courseIds.push(e.id);
      }
    },
    //查询分类
    getCourseTypeList() {
      let url = "course/typelist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.courseTypeList = res.data.data;
          console.log(res.data.msg)
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    getCourseList() {
      let url = "course/clist";
      this.$axios.get(url, {
        params: {
          name: this.name,
          now: this.pageNum,
          size: this.pageSize,
          tid: this.tid
        }
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res)
          this.courseList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },


  },
  created() {
    console.log("啦啦啦啦")
    this.getCourseList();
    this.getCourseTypeList();
  }
}
</script>

<style scoped>

</style>